<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>go-chat 聊天室</title>
    <link
      rel="stylesheet"
      href="//s2.pstatp.com/cdn/expire-1-M/twitter-bootstrap/3.3.5/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/static/rolling/css/rolling.css" />
    <link rel="stylesheet" href="/static/stylesheets/style.css" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />

    <script
      type="text/javascript"
      src="//s2.pstatp.com/cdn/expire-1-M/jquery/1.11.2/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="//s2.pstatp.com/cdn/expire-1-M/twitter-bootstrap/3.3.5/js/bootstrap.min.js"
    ></script>
    <script type="text/javascript" src="/static/rolling/js/rolling.js"></script>
  </head>
  <body class="rooms">
    <div class="scrollbar-macosx">
      <div class="header">
        <div class="toptext">
          <a href="#">
            <span class="glyphicon glyphicon-home"></span>
            <b>选择一个聊天室</b>
          </a>
        </div>
        <ul class="topnavlist">
          <li class="userinfo">
            <a
              ><span class="glyphicon glyphicon-user"></span
              ><b> {{ .user_info.username }} </b></a
            >
          </li>
          <li><a class="_logout" href="javascript:;"> 退出登录 </a></li>
        </ul>
        <div class="clapboard hidden"></div>
      </div>
      <div class="main container">
        <div class="room_list">
          {{range .rooms}}

          <div class="col-xs-6 col-sm-6 col-md-4">
            <a href="/room/{{ .id }}" class="thumbnail">
              <img
                src="/static/images/rooms/{{ .id }}.jpg"
                alt="聊天室{{ .id }}"
              />
              <span
                ><span class="glyphicon glyphicon-user"></span>&nbsp;{{ .num
                }}</span
              >
            </a>
          </div>

          {{ end }}
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(document).ready(function() {
      // 退出登录功能
      $(document).on('click', '._logout', function(e) {
        clearCookie();
        window.location.assign("/");
      });
    });
    
    // Cookie操作函数
    function GetCookieVal(offset) {
      var endstr = document.cookie.indexOf("; ", offset);
      if (endstr == -1) endstr = document.cookie.length;
      return decodeURIComponent(document.cookie.substring(offset, endstr));
    }
    
    function GetCookie(name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) return GetCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }
    
    function clearCookie() {
      var date = new Date();
      date.setTime(date.getTime() - 10000);
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
      if (keys) {
        for (var i = keys.length; i--; )
          document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
      }
    }
  </script>
</html>
